08. Playing with Line-Height

Playing with Line-height

Question:

Playing with Line-Height

The line-height property controls the height of lines, obviously 😉 .

duh meme

Line-Height

More specifically, line-height defines the minimum height of line boxes for inline elements. You've probably done something very similar to this if you've used a word processor and set the line spacing for a document to single-spaced, double-spaced, and so on.

setting line spacing in Microsoft Word

Example of setting line-spacing, similar to line-height, in Microsoft Word 2016.

You can specify line-height three different ways, by using a (1) number, (2) length, or (3) percentage. By default, line-height is set to normal which is rougly 1.2 (based on the elememt's font-family) multiplied by the element's font-size.

For example, if your element's font-size is set to 16px, then by default its line-height is rougly 19.2px when set to normal. You could achieve the same result by writing line-height as:

  1. line-height: 1.2;
  2. line-height: 19.2px;
  3. line-height: 120%;

Here's three different ways to express line-height. These are all equivalent, assuming the element's font-size is set to 16px (1.2 multiplied by 16px = 19.2px).

In this quiz, you'll play around with using different values for line-height. Also, when you pass each test, you will be rewarded with a cool CSS effect. Each effect leverages line-height to generate some pretty interesting results! Are you ready to get started?

How to Complete this Quiz

  1. Open this webpage with Chrome.
  2. Turn on the Udacity Feedback Chrome Extension.
  3. Use Developer Tools to pass all the tests.
  4. Copy and paste the code that appears into the next page to finish!


Good luck!

Start Quiz:

Solution:

Awesome job! You could have completed the tests a couple of different ways, so I've listed a few different answers below.

.one {
  line-height: 22px;
  /* line-height: 1;     <- another way of writing it */
  /* line-height: 100%;  <- another way of writing it */
}

.two {
  line-height: 2;
  /* line-height: 44px;  <- another way of writing it */
  /* line-height: 200%;  <- another way of writing it */
}

.three {
  line-height: 300%;
  /* line-height: 66px;  <- another way of writing it */
  /* line-height: 3;     <- another way of writing it */
}

Cool CSS Effects

…and what about those effects! Pretty cool, right?

line-height effects

Well if you didn't know already, CSS is pretty awesome! Those effects were actually created using line-height and a combination of background-image , text-fill-color , and background-clip . If you want to learn more about how I created those effects, check out this post by css-tricks.com.

Next Concept